<template>
	<div class="box" style="background-color: #e2ede5;">
		<div class="hand">
			<h3>智慧浮龙湖</h3>
		</div>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item>1</van-swipe-item>
			<van-swipe-item>2</van-swipe-item>
			<van-swipe-item>3</van-swipe-item>
			<van-swipe-item>4</van-swipe-item>
		</van-swipe>

		<div class="yvlan">
			<van-grid :column-num="4">
				<van-grid-item>
					<a href="">
						<div class="go01">
							<van-icon name="photo" color="#ffffff" />
						</div>

						&nbsp;景区介绍
					</a>
				</van-grid-item>
				<van-grid-item>
					<a href="">
						<div class="go02">
							<van-icon name="coupon" color="#ffffff" />
						</div>
						&nbsp;票务预订
					</a>
				</van-grid-item>
				<van-grid-item>
					<a href="">
						<div class="go03">
							<van-icon name="manager" color="#ffffff" />
						</div>
						&nbsp;游客服务
					</a>
				</van-grid-item>
				<van-grid-item>
					<a href="">
						<div class="go04">
							<van-icon name="logistics" color="#ffffff" />
						</div>
						&nbsp;智慧停车
					</a>
				</van-grid-item>
				<van-grid-item>
					<a href="">
						<div class="go05">
							<van-icon name="home-o" color="#ffffff" />
						</div>
						&nbsp;智慧公厕
					</a>
				</van-grid-item>
				<van-grid-item>
					<a href="">
						<div class="go06">
							<van-icon name="play-circle" color="#ffffff" />
						</div>
						&nbsp;美景直播
					</a>
				</van-grid-item>
				<van-grid-item>
					<a href="">
						<div class="go07">
							<van-icon name="bar-chart-o" color="#ffffff" />
						</div>
						&nbsp;实时数据
					</a>
				</van-grid-item>
				<van-grid-item>
					<a href="">
						<div class="go08">
							<van-icon name="bulb-o" color="#ffffff" />
						</div>
						&nbsp;一键求助
					</a>
				</van-grid-item>
			</van-grid>
		</div>

		<div class="bej">
			<a href="">
				<img src="https://img01.yzcdn.cn/vant/cat.jpeg">
				<div class="quanjing">720°全景</div>
			</a>
		</div>

		<div class="todo">
			<div class="todo01">
				<i class="el-icon-menu"></i>
				<span>精选攻略</span>
			</div>
			<div class="todo02">
				<div class="todo002">
					<p>浮龙湖平日成人票</p>
					<span>入园时间：2021-02-20</span>

				</div>
				<div class="waitingpark">
					<p>待入园</p>
				</div>

				<div class="todo003">
					<p>鲁B.45457</p>
					<span>停留时长：2021-02-20</span>

				</div>
				<div class="waitingpayment">
					<p>待缴费</p>
				</div>

			</div>
		</div>

		<div class="mustplay">

			<div class="mustplay01">

				<div class="mustplay001">
					<i class="el-icon-menu"></i>
					<span>春季必玩</span>
				</div>
				<div class="mustplay002">
					<a href=""><span>更多<van-icon name="arrow" /></span></a>
				</div>
			</div>

			<div class="mustplay03">
				<div class="mustplay003">
					<img src="https://img01.yzcdn.cn/vant/cat.jpeg">
					<p>万里长城</p>
				</div>
				<div class="mustplay004">
					<img src="https://img01.yzcdn.cn/vant/cat.jpeg">
					<p>高山流水</p>
				</div>
			</div>
		</div>

		<div class="strategy">
			<div class="strategy01">

				<div class="strategy001">
					<i class="el-icon-menu"></i>
					<span>精选攻略</span>
				</div>
				<div class="strategy002">
					<a href=""><span>更多<van-icon name="arrow" /></span></a>
				</div>

			</div>

			<div class="strategy03">

				<div class="strategy003">
					<h4>我竟然在浮龙湖边发现了陶渊明式的“桃花源记”</h4>
					<span>小暖暖 &emsp; &emsp; 2021-02-03</span>
				</div>
				<div class="strategy0003">
					<img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
				</div>
				<div class="strategy004">
					<h4>绝美黄昏：孤舟静躺湖面，山水斜阳共绘浪漫画卷</h4>
					<span>乐悠 &emsp; &emsp; 2021-02-03</span>
				</div>
				<div class="strategy0004">
					<img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
				</div>
				<div class="strategy005">
					<h4>木桥静卧，孤舟浮水，霞光满天，此景绝艳 </h4>
					<span>箫影 &emsp; &emsp; 2021-02-03</span>
				</div>
				<div class="strategy0005">
					<img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
				</div>
			</div>
		</div>

		<div class="newactivity">

			<div class="newactivity01">
				<div class="newactivity001">
					<i class="el-icon-menu"></i>
					<span>最新活动</span>
				</div>
				<div class="newactivity002">
					<a href=""><span>更多<van-icon name="arrow" /></span></a>
				</div>
			</div>


			<div class="newactivity03">

				<div class="playnow01">
					进行中
				</div>

			</div>
			<div class="newactivity04">

				<div class="playnow02">
					进行中
				</div>

			</div>

		</div>

		<div class="标签栏">
			<van-tabbar v-model="active">
			  <van-tabbar-item name="first" icon="wap-home">首页</van-tabbar-item>
			  <van-tabbar-item name="lvyou" icon="eye">导览</van-tabbar-item>
			  <van-tabbar-item name="my" icon="contact">我的</van-tabbar-item>
			</van-tabbar>
		</div>

		
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		Lazyload
	} from 'vant';

	Vue.use(Lazyload);

	export default {
		data() {
			return {

			};
		},
	};
</script>

<style>
	* {
		margin-top: 0;
		margin-bottom: 0;
	}

	.box {
		width: 400px;
		height: 100%;
	}

	.my-swipe {
		width: 400px;
		height: 200px;
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		background-color: #39a9ed;
	}

	.hand {
		width: 400px;
		height: 35px;
		text-align: center;
		align-items: center;
		padding-top: 10px;
	}

	.hand h3 {
		margin-top: 0;
		margin-bottom: 0px;
	}

	.yvlan {
		width: 400px;
		height: 300px;
		border-width: 0 0 0 0;
	}

	.van-grid-item {
		width: 100px;
		height: 140px;
	}

	.go01 {
		width: 75px;
		height: 75px;
		background-color: #6385ff;
		border-radius: 50%;
		margin-bottom: 15px;
	}

	.go01 i {
		margin-left: 19px;
		margin-top: 19px;
		font-size: 36px;
	}

	.go02 {
		width: 75px;
		height: 75px;
		background-color: #10dbb8;
		border-radius: 50%;
		margin-bottom: 15px;
	}

	.go02 i {
		margin-left: 19px;
		margin-top: 19px;
		font-size: 36px;
	}

	.go03 {
		width: 75px;
		height: 75px;
		background-color: #53cdf2;
		border-radius: 50%;
		margin-bottom: 15px;
	}

	.go03 i {
		margin-left: 19px;
		margin-top: 19px;
		font-size: 36px;
	}

	.go04 {
		width: 75px;
		height: 75px;
		background-color: #428aed;
		border-radius: 50%;
		margin-bottom: 15px;
	}

	.go04 i {
		margin-left: 19px;
		margin-top: 19px;
		font-size: 36px;
	}

	.go05 {
		width: 75px;
		height: 75px;
		background-color: #b763fa;
		border-radius: 50%;
		margin-bottom: 15px;
	}

	.go05 i {
		margin-left: 19px;
		margin-top: 19px;
		font-size: 36px;
	}

	.go06 {
		width: 75px;
		height: 75px;
		background-color: #f2b729;
		border-radius: 50%;
		margin-bottom: 15px;
	}

	.go06 i {
		margin-left: 19px;
		margin-top: 19px;
		font-size: 36px;
	}

	.go07 {
		width: 75px;
		height: 75px;
		background-color: #fe9732;
		border-radius: 50%;
		margin-bottom: 15px;
	}

	.go07 i {
		margin-left: 19px;
		margin-top: 19px;
		font-size: 36px;
	}

	.go08 {
		width: 75px;
		height: 75px;
		background-color: #f55843;
		border-radius: 50%;
		margin-bottom: 15px;
	}

	.go08 i {
		margin-left: 19px;
		margin-top: 19px;
		font-size: 36px;
	}

	.van-grid a {
		color: black;
		font-size: 15.5px;
	}

	.bej {
		width: 400px;
		height: 90px;
	}

	.bej img {
		width: 400px;
		height: 90px;
		border-radius: 5px;
	}

	.quanjing {
		position: relative;
		width: 66px;
		height: 17px;
		bottom: 50px;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #0084ff;
		color: white;
		padding: 10px 20px;
		border-radius: 20px;
	}

	.todo {
		width: 400px;
		height: 225px;
	}

	.todo01 {
		width: 400px;
		height: 50px;

	}

	.todo01 i {
		color: #0084ff;
		margin-left: 13px;
		margin-right: 5px;
		margin-top: 15px;
	}

	.todo span {
		color: #959795;
		font-size: 14px;
	}

	.todo02 {
		width: 400px;
		height: 150px;
	}

	.todo002 {
		width: 300px;
		height: 60px;
		float: left;
		border-bottom: 1px solid #ded5d5;
	}

	.todo002 p {
		margin-left: 30px;
		margin-bottom: 5px;
	}

	.todo002 span {

		margin-left: 30px;
	}

	.waitingpark {
		width: 100px;
		height: 60px;
		border-bottom: 1px solid #ded5d5;
		float: right;
	}

	.waitingpark p {
		width: 80px;
		height: 35px;
		background-color: #56a8f3;
		text-align: center;
		line-height: 35px;
		margin-right: 20px;
		border-radius: 50px;
		color: white;
	}

	.todo003 {
		width: 300px;
		height: 89px;
		float: left;
		border-bottom: 1px solid #ded5d5;
	}

	.todo003 p {
		margin-top: 20px;
		margin-left: 30px;
		margin-bottom: 8px;
	}

	.todo003 span {
		margin-left: 30px;
	}

	.waitingpayment {
		width: 100px;
		height: 89px;
		border-bottom: 1px solid #ded5d5;
		float: right;
	}

	.waitingpayment p {
		margin-top: 30px;
		width: 80px;
		height: 35px;
		background-color: #56a8f3;
		text-align: center;
		line-height: 35px;
		margin-right: 20px;
		border-radius: 50px;
		color: white;
	}

	.mustplay {
		width: 400px;
		height: 175px;
	}

	.mustplay01 {
		width: 400px;
		height: 35px;

	}

	.mustplay001 {
		width: 300px;
		height: 30px;
		float: left;
	}

	.mustplay002 {
		width: 100px;
		height: 30px;
		float: right;
	}

	.mustplay001 i {
		color: #0084ff;
		margin-left: 13px;
		margin-right: 5px;

	}

	.mustplay001 span {
		color: #959795;
		font-size: 14px;
	}

	.mustplay002 span {
		color: #959795;
		font-size: 14px;
		margin-left: 45px;
	}

	.mustplay03 {
		width: 400px;
		height: 140px;
	}

	.mustplay03 p {
		text-align: center;
	}

	.mustplay003 {
		width: 185px;
		height: 100px;
		float: left;
		margin-left: 10px;
	}

	.mustplay003 img {
		width: 185px;
		height: 100px;
	}

	.mustplay004 {
		width: 185px;
		height: 100px;
		float: right;
		margin-right: 10px;
	}

	.mustplay004 img {
		width: 185px;
		height: 100px;
	}

	.strategy {
		width: 400px;
		height: 370px;
	}

	.strategy01 {
		width: 400px;
		height: 30px;
	}

	.strategy001 {
		width: 300px;
		height: 30px;
		float: left;
	}

	.strategy002 {
		width: 100px;
		height: 30px;
		float: right;
	}

	.strategy001 i {
		color: #0084ff;
		margin-left: 13px;
		margin-right: 5px;
		line-height: 25px;
	}

	.strategy001 span {
		color: #959795;
		font-size: 14px;
	}

	.strategy002 span {
		color: #959795;
		font-size: 14px;
		margin-left: 45px;
		line-height: 25px;
	}

	.strategy03 {
		width: 400px;
		height: 323px;
		background-color: #fff;

	}

	.strategy03 span {
		color: #959795;
		font-size: 14px;
		line-height: 60px;
	}

	.strategy003 {
		width: 250px;
		height: 95px;
		border-bottom: 1px solid #ded5d5;
		float: left;
		padding-top: 5px;
	}

	.strategy003 h4 {
		margin-left: 13px;
	}

	.strategy003 span {
		margin-left: 13px;
	}

	.strategy0003 {
		width: 150px;
		height: 95px;
		border-bottom: 1px solid #ded5d5;
		float: right;
		text-align: center;
		padding-top: 5px;
	}

	.strategy0003 img {
		width: 130px;
		height: 80px;

	}

	.strategy004 {
		width: 250px;
		height: 95px;
		border-bottom: 1px solid #ded5d5;
		float: left;
		padding-top: 15px;
	}

	.strategy004 h4 {
		margin-left: 13px;
	}

	.strategy004 span {
		margin-left: 13px;
	}

	.strategy0004 {
		width: 150px;
		height: 95px;
		border-bottom: 1px solid #ded5d5;
		float: right;
		text-align: center;
		padding-top: 15px;
	}

	.strategy0004 img {
		width: 130px;
		height: 80px;

	}

	.strategy005 {
		width: 250px;
		height: 95px;
		border-bottom: 1px solid #ded5d5;
		float: left;
		padding-top: 15px;
	}

	.strategy005 h4 {
		margin-left: 13px;
	}

	.strategy005 span {
		margin-left: 13px;
	}

	.strategy0005 {
		width: 150px;
		height: 95px;
		border-bottom: 1px solid #ded5d5;
		float: right;
		text-align: center;
		padding-top: 15px;
	}

	.strategy0005 img {
		width: 130px;
		height: 80px;
		text-align: center;
	}

	.newactivity {
		width: 400px;
		height: ;
	}

	.newactivity01 {
		width: 400px;
		height: 30px;
	}

	.newactivity001 {
		width: 300px;
		height: 30px;
		float: left;
	}

	.newactivity002 {
		width: 100px;
		height: 30px;
		float: right;
	}

	.newactivity001 i {
		color: #0084ff;
		margin-left: 13px;
		margin-right: 5px;
		line-height: 25px;
	}

	.newactivity001 span {
		color: #959795;
		font-size: 14px;
	}

	.newactivity002 span {
		color: #959795;
		font-size: 14px;
		margin-left: 45px;
		line-height: 25px;
	}

	.newactivity03 {
		width: 390px;
		height: 175px;
		border-radius: 4px;
		background-image: url(https://img01.yzcdn.cn/vant/cat.jpeg);
		margin-left: 5px;
		margin-bottom: 10px;
	}

	.playnow01 {
		position: relative;
		width: 55px;
		height: 25px;
		top: 20px;
		bottom: 0px;
		left: 40px;
		transform: translate(-50%, -50%);
		border-radius: 5px;
		background-color: #0084ff;
		color: white;
		text-align: center;
	}

	.newactivity04 {
		width: 390px;
		height: 175px;
		border-radius: 4px;
		background-image: url(https://img01.yzcdn.cn/vant/cat.jpeg);
		margin-left: 5px;
		margin-bottom: 10px;
	}

	.playnow02 {
		position: relative;
		width: 55px;
		height: 25px;
		top: 20px;
		bottom: 0px;
		left: 40px;
		transform: translate(-50%, -50%);
		border-radius: 5px;
		background-color: #0084ff;
		color: white;
		text-align: center;
	}
</style>